/**
 * @file contab.js
 * @author betgar (betgar@163.com)
 * @date 10/19/2018
 * @time 16:15:07
 * @description
 */

define([
    'jquery',
    'underscore',
    'backbone'
], function ($, _, Backbone) {
    'use strict';
    // var TabViews = Backbone.View.extend({
    //     initialize: function (options) {
    //         var context = this;
    //         $.each(options.elements || {}, function (key, value) {
    //             context[key] = context.$el.find(value);
    //         });


    //     },
    //     el: $(''),
    //     render: function (options) {
    //         // 获取标识数据
    //         var dataUrl = $(this).attr('href'),
    //             dataIndex = $(this).data('index'),
    //             menuName = $.trim($(this).text()),
    //             flag = true;
    //         if (dataUrl == undefined || $.trim(dataUrl).length == 0) return false;

    //         // 选项卡菜单已存在
    //         $('.menuTab').each(function () {
    //             if ($(this).data('id') == dataUrl) {
    //                 if (!$(this).hasClass('active')) {
    //                     $(this).addClass('active').siblings('.menuTab').removeClass('active');
    //                     scrollToTab(this);
    //                     // 显示tab对应的内容区
    //                     $('.mainContent .RuoYi_iframe').each(function () {
    //                         if ($(this).data('id') == dataUrl) {
    //                             $(this).show().siblings('.RuoYi_iframe').hide();
    //                             return false;
    //                         }
    //                     });
    //                 }
    //                 flag = false;
    //                 return false;
    //             }
    //         });
    //         // 选项卡菜单不存在
    //         if (flag) {
    //             var str = '<a href="javascript:;" class="active menuTab" data-id="' + dataUrl + '">' + menuName + ' <i class="fa fa-times-circle"></i></a>';
    //             $('.menuTab').removeClass('active');

    //             // 添加选项卡对应的iframe
    //             var str1 = '<iframe class="RuoYi_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
    //             $('.mainContent').find('iframe.RuoYi_iframe').hide().parents('.mainContent').append(str1);

    //             $.modal.loading("数据加载中，请稍后...");

    //             $('.mainContent iframe:visible').load(function () {
    //                 $.modal.closeLoading();
    //             });

    //             // 添加选项卡
    //             $('.menuTabs .page-tabs-content').append(str);
    //             scrollToTab($('.menuTab.active'));
    //         }
    //         return this;
    //     },
    //     events: {
    //         'click .tabLeft': 'scrollLeft',
    //         'click .tabRight': 'scrollRight',
    //         'click .tabReload': 'refresh',
    //         'click .tabCloseCurrent': 'close',
    //         'click .tabCloseAll': 'closeAll',
    //         'click .tabCloseOthers': 'closeOthers',
    //         'click .tabShowActive': 'active'
    //     },
    //     scrollTo: function (elements) {
    //         var marginLeftVal = calSumWidth($(element).prevAll()),
    //             marginRightVal = calSumWidth($(element).nextAll());
    //         // 固定的按钮的宽度
    //         var fixedBtnWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
    //         //可视区域tab宽度
    //         var visibleWidth = $(".content-tabs").outerWidth(true) - fixedBtnWidth;
    //         //实际滚动宽度
    //         var scrollVal = 0;
    //         // 如果tabs header的总宽度小于 可视区域，那就不滚动
    //         if ($(".page-tabs-content").outerWidth() < visibleWidth) {
    //             scrollVal = 0;
    //             // 左移动，如果可视区域 >= marginRight，则应该左移动（margin-left需要减少）
    //         } else if (marginRightVal <= (visibleWidth - $(element).outerWidth(true) - $(element).next().outerWidth(true))) {
    //             if ((visibleWidth - $(element).next().outerWidth(true)) > marginRightVal) {
    //                 scrollVal = marginLeftVal;
    //                 var tabElement = element;
    //                 while ((scrollVal - $(tabElement).outerWidth()) > ($(".page-tabs-content").outerWidth() - visibleWidth)) {
    //                     scrollVal -= $(tabElement).prev().outerWidth();
    //                     tabElement = $(tabElement).prev();
    //                 }
    //             }
    //             // 往右移动
    //         } else if (marginLeftVal > (visibleWidth - $(element).outerWidth(true) - $(element).prev().outerWidth(true))) {
    //             scrollVal = marginLeftVal - $(element).prev().outerWidth(true);
    //         }
    //         $('.page-tabs-content').animate({
    //             marginLeft: 0 - scrollVal + 'px'
    //         },
    //             "fast");
    //     },
    //     scrollLeft: function () {
    //         var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
    //         // 可视区域非tab宽度
    //         var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
    //         //可视区域tab宽度
    //         var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
    //         //实际滚动宽度
    //         var scrollVal = 0;
    //         if ($(".page-tabs-content").width() < visibleWidth) {
    //             return false;
    //         } else {
    //             var tabElement = $(".menuTab:first");
    //             var offsetVal = 0;
    //             while ((offsetVal + $(tabElement).outerWidth(true)) <= marginLeftVal) { //找到离当前tab最近的元素
    //                 offsetVal += $(tabElement).outerWidth(true);
    //                 tabElement = $(tabElement).next();
    //             }
    //             offsetVal = 0;
    //             if (calSumWidth($(tabElement).prevAll()) > visibleWidth) {
    //                 while ((offsetVal + $(tabElement).outerWidth(true)) < (visibleWidth) && tabElement.length > 0) {
    //                     offsetVal += $(tabElement).outerWidth(true);
    //                     tabElement = $(tabElement).prev();
    //                 }
    //                 scrollVal = calSumWidth($(tabElement).prevAll());
    //             }
    //         }
    //         $('.page-tabs-content').animate({
    //             marginLeft: 0 - scrollVal + 'px'
    //         },
    //             "fast");
    //     },
    //     scrollRight: function () {
    //         var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
    //         // 可视区域非tab宽度
    //         var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
    //         //可视区域tab宽度
    //         var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
    //         //实际滚动宽度
    //         var scrollVal = 0;
    //         if ($(".page-tabs-content").width() < visibleWidth) {
    //             return false;
    //         } else {
    //             var tabElement = $(".menuTab:first");
    //             var offsetVal = 0;
    //             while ((offsetVal + $(tabElement).outerWidth(true)) <= marginLeftVal) { //找到离当前tab最近的元素
    //                 offsetVal += $(tabElement).outerWidth(true);
    //                 tabElement = $(tabElement).next();
    //             }
    //             offsetVal = 0;
    //             while ((offsetVal + $(tabElement).outerWidth(true)) < (visibleWidth) && tabElement.length > 0) {
    //                 offsetVal += $(tabElement).outerWidth(true);
    //                 tabElement = $(tabElement).next();
    //             }
    //             scrollVal = calSumWidth($(tabElement).prevAll());
    //             if (scrollVal > 0) {
    //                 $('.page-tabs-content').animate({
    //                     marginLeft: 0 - scrollVal + 'px'
    //                 },
    //                     "fast");
    //             }
    //         }
    //     },
    //     scrollToActive: function (param) { },
    //     calcWidthBy: function (elements) { },
    //     closeOthers: function (param) {
    //         $('.page-tabs-content').children("[data-id]").not(":first").not(".active").each(function () {
    //             $('.RuoYi_iframe[data-id="' + $(this).data('id') + '"]').remove();
    //             $(this).remove();
    //         });
    //         $('.page-tabs-content').css("margin-left", "0");
    //     },
    //     active: function (param) {
    //         if (!$(this).hasClass('active')) {
    //             var currentId = $(this).data('id');
    //             // 显示tab对应的内容区
    //             $('.mainContent .RuoYi_iframe').each(function () {
    //                 if ($(this).data('id') == currentId) {
    //                     $(this).show().siblings('.RuoYi_iframe').hide();
    //                     return false;
    //                 }
    //             });
    //             $(this).addClass('active').siblings('.menuTab').removeClass('active');
    //             scrollToTab(this);
    //         }
    //     },
    //     focusActive: function (param) {
    //         this.scrollTo($('.menuTab.active'));
    //     },
    //     refresh: function (param) {
    //         var currentId = $('.page-tabs-content').find('.active').attr('data-id');
    //         var target = $('.RuoYi_iframe[data-id="' + currentId + '"]');
    //         var url = target.attr('src');
    //         target.attr('src', url).ready();
    //     },
    //     close: function (param) {
    //         var closeTabId = $(this).parents('.menuTab').data('id');
    //         var currentWidth = $(this).parents('.menuTab').width();

    //         // 当前元素处于活动状态
    //         if ($(this).parents('.menuTab').hasClass('active')) {

    //             // 当前元素后面有同辈元素，使后面的一个元素处于活动状态
    //             if ($(this).parents('.menuTab').next('.menuTab').size()) {

    //                 var activeId = $(this).parents('.menuTab').next('.menuTab:eq(0)').data('id');
    //                 $(this).parents('.menuTab').next('.menuTab:eq(0)').addClass('active');

    //                 $('.mainContent .RuoYi_iframe').each(function () {
    //                     if ($(this).data('id') == activeId) {
    //                         $(this).show().siblings('.RuoYi_iframe').hide();
    //                         return false;
    //                     }
    //                 });

    //                 var marginLeftVal = parseInt($('.page-tabs-content').css('margin-left'));
    //                 if (marginLeftVal < 0) {
    //                     $('.page-tabs-content').animate({
    //                         marginLeft: (marginLeftVal + currentWidth) + 'px'
    //                     },
    //                         "fast");
    //                 }

    //                 //  移除当前选项卡
    //                 $(this).parents('.menuTab').remove();

    //                 // 移除tab对应的内容区
    //                 $('.mainContent .RuoYi_iframe').each(function () {
    //                     if ($(this).data('id') == closeTabId) {
    //                         $(this).remove();
    //                         return false;
    //                     }
    //                 });
    //             }

    //             // 当前元素后面没有同辈元素，使当前元素的上一个元素处于活动状态
    //             if ($(this).parents('.menuTab').prev('.menuTab').size()) {
    //                 var activeId = $(this).parents('.menuTab').prev('.menuTab:last').data('id');
    //                 $(this).parents('.menuTab').prev('.menuTab:last').addClass('active');
    //                 $('.mainContent .RuoYi_iframe').each(function () {
    //                     if ($(this).data('id') == activeId) {
    //                         $(this).show().siblings('.RuoYi_iframe').hide();
    //                         return false;
    //                     }
    //                 });

    //                 //  移除当前选项卡
    //                 $(this).parents('.menuTab').remove();

    //                 // 移除tab对应的内容区
    //                 $('.mainContent .RuoYi_iframe').each(function () {
    //                     if ($(this).data('id') == closeTabId) {
    //                         $(this).remove();
    //                         return false;
    //                     }
    //                 });
    //             }
    //         }
    //         // 当前元素不处于活动状态
    //         else {
    //             //  移除当前选项卡
    //             $(this).parents('.menuTab').remove();

    //             // 移除相应tab对应的内容区
    //             $('.mainContent .RuoYi_iframe').each(function () {
    //                 if ($(this).data('id') == closeTabId) {
    //                     $(this).remove();
    //                     return false;
    //                 }
    //             });
    //             scrollToTab($('.menuTab.active'));
    //         }
    //         return false;
    //     },
    //     closeActive: function (param) {
    //         $('.page-tabs-content').find('.active i').trigger("click");
    //     },

    //     closeAll: function (param) {
    //         $('.page-tabs-content').children("[data-id]").not(":first").each(function () {
    //             $('.RuoYi_iframe[data-id="' + $(this).data('id') + '"]').remove();
    //             $(this).remove();
    //         });
    //         $('.page-tabs-content').children("[data-id]:first").each(function () {
    //             $('.RuoYi_iframe[data-id="' + $(this).data('id') + '"]').show();
    //             $(this).addClass("active");
    //         });
    //         $('.page-tabs-content').css("margin-left", "0");
    //     },
    //     calcWidthFor: function (elements) {
    //         var width = 0;
    //         $(elements).each(function () {
    //             width += $(this).outerWidth(true);
    //         });
    //         return width;
    //     }
    // });
    function _init() {


        //计算元素集合的总宽度
        function calSumWidth(elements) {
            var width = 0;
            $(elements).each(function () {
                width += $(this).outerWidth(true);
            });
            return width;
        }



        //滚动到指定选项卡
        function scrollToTab(element) {
            var marginLeftVal = calSumWidth($(element).prevAll()),
                marginRightVal = calSumWidth($(element).nextAll());
            // 固定的按钮的宽度
            var fixedBtnWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
            //可视区域tab宽度
            var visibleWidth = $(".content-tabs").outerWidth(true) - fixedBtnWidth;
            //实际滚动宽度
            var scrollVal = 0;
            // 如果tabs header的总宽度小于 可视区域，那就不滚动
            if ($(".page-tabs-content").outerWidth() < visibleWidth) {
                scrollVal = 0;
                // 左移动，如果可视区域 >= marginRight，则应该左移动（margin-left需要减少）
            } else if (marginRightVal <= (visibleWidth - $(element).outerWidth(true) - $(element).next().outerWidth(true))) {
                if ((visibleWidth - $(element).next().outerWidth(true)) > marginRightVal) {
                    scrollVal = marginLeftVal;
                    var tabElement = element;
                    while ((scrollVal - $(tabElement).outerWidth()) > ($(".page-tabs-content").outerWidth() - visibleWidth)) {
                        scrollVal -= $(tabElement).prev().outerWidth();
                        tabElement = $(tabElement).prev();
                    }
                }
                // 往右移动
            } else if (marginLeftVal > (visibleWidth - $(element).outerWidth(true) - $(element).prev().outerWidth(true))) {
                scrollVal = marginLeftVal - $(element).prev().outerWidth(true);
            }
            $('.page-tabs-content').animate({
                marginLeft: 0 - scrollVal + 'px'
            },
                "fast");
        }

        //查看左侧隐藏的选项卡
        function scrollTabLeft() {
            var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
            // 可视区域非tab宽度
            var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
            //可视区域tab宽度
            var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
            //实际滚动宽度
            var scrollVal = 0;
            if ($(".page-tabs-content").width() < visibleWidth) {
                return false;
            } else {
                var tabElement = $(".menuTab:first");
                var offsetVal = 0;
                while ((offsetVal + $(tabElement).outerWidth(true)) <= marginLeftVal) { //找到离当前tab最近的元素
                    offsetVal += $(tabElement).outerWidth(true);
                    tabElement = $(tabElement).next();
                }
                offsetVal = 0;
                if (calSumWidth($(tabElement).prevAll()) > visibleWidth) {
                    while ((offsetVal + $(tabElement).outerWidth(true)) < (visibleWidth) && tabElement.length > 0) {
                        offsetVal += $(tabElement).outerWidth(true);
                        tabElement = $(tabElement).prev();
                    }
                    scrollVal = calSumWidth($(tabElement).prevAll());
                }
            }
            $('.page-tabs-content').animate({
                marginLeft: 0 - scrollVal + 'px'
            },
                "fast");
        }

        //查看右侧隐藏的选项卡
        function scrollTabRight() {
            var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
            // 可视区域非tab宽度
            var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
            //可视区域tab宽度
            var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
            //实际滚动宽度
            var scrollVal = 0;
            if ($(".page-tabs-content").width() < visibleWidth) {
                return false;
            } else {
                var tabElement = $(".menuTab:first");
                var offsetVal = 0;
                while ((offsetVal + $(tabElement).outerWidth(true)) <= marginLeftVal) { //找到离当前tab最近的元素
                    offsetVal += $(tabElement).outerWidth(true);
                    tabElement = $(tabElement).next();
                }
                offsetVal = 0;
                while ((offsetVal + $(tabElement).outerWidth(true)) < (visibleWidth) && tabElement.length > 0) {
                    offsetVal += $(tabElement).outerWidth(true);
                    tabElement = $(tabElement).next();
                }
                scrollVal = calSumWidth($(tabElement).prevAll());
                if (scrollVal > 0) {
                    $('.page-tabs-content').animate({
                        marginLeft: 0 - scrollVal + 'px'
                    },
                        "fast");
                }
            }
        }

        //通过遍历给菜单项加上data-index属性
        $(".menuItem").each(function (index) {
            if (!$(this).attr('data-index')) {
                $(this).attr('data-index', index);
            }
        });

        function menuItem() {
            // 获取标识数据
            var dataUrl = $(this).attr('href'),
                dataIndex = $(this).data('index'),
                menuName = $.trim($(this).text()),
                flag = true;
            if (dataUrl == undefined || $.trim(dataUrl).length == 0) return false;

            // 选项卡菜单已存在
            $('.menuTab').each(function () {
                if ($(this).data('id') == dataUrl) {
                    if (!$(this).hasClass('active')) {
                        $(this).addClass('active').siblings('.menuTab').removeClass('active');
                        scrollToTab(this);
                        // 显示tab对应的内容区
                        $('.mainContent .RuoYi_iframe').each(function () {
                            if ($(this).data('id') == dataUrl) {
                                $(this).show().siblings('.RuoYi_iframe').hide();
                                return false;
                            }
                        });
                    }
                    flag = false;
                    return false;
                }
            });
            // 选项卡菜单不存在
            if (flag) {
                var str = '<a href="javascript:;" class="active menuTab" data-id="' + dataUrl + '">' + menuName + ' <i class="fa fa-times-circle"></i></a>';
                $('.menuTab').removeClass('active');

                // 添加选项卡对应的iframe
                var str1 = '<iframe class="RuoYi_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
                $('.mainContent').find('iframe.RuoYi_iframe').hide().parents('.mainContent').append(str1);

                $.modal.loading("数据加载中，请稍后...");

                $('.mainContent iframe:visible').load(function () {
                    $.modal.closeLoading();
                });

                // 添加选项卡
                $('.menuTabs .page-tabs-content').append(str);
                scrollToTab($('.menuTab.active'));
            }
            return false;
        }

        $('.menuItem').on('click', menuItem);

        // 关闭选项卡菜单
        function closeTab() {
            var closeTabId = $(this).parents('.menuTab').data('id');
            var currentWidth = $(this).parents('.menuTab').width();

            // 当前元素处于活动状态
            if ($(this).parents('.menuTab').hasClass('active')) {

                // 当前元素后面有同辈元素，使后面的一个元素处于活动状态
                if ($(this).parents('.menuTab').next('.menuTab').size()) {

                    var activeId = $(this).parents('.menuTab').next('.menuTab:eq(0)').data('id');
                    $(this).parents('.menuTab').next('.menuTab:eq(0)').addClass('active');

                    $('.mainContent .RuoYi_iframe').each(function () {
                        if ($(this).data('id') == activeId) {
                            $(this).show().siblings('.RuoYi_iframe').hide();
                            return false;
                        }
                    });

                    var marginLeftVal = parseInt($('.page-tabs-content').css('margin-left'));
                    if (marginLeftVal < 0) {
                        $('.page-tabs-content').animate({
                            marginLeft: (marginLeftVal + currentWidth) + 'px'
                        },
                            "fast");
                    }

                    //  移除当前选项卡
                    $(this).parents('.menuTab').remove();

                    // 移除tab对应的内容区
                    $('.mainContent .RuoYi_iframe').each(function () {
                        if ($(this).data('id') == closeTabId) {
                            $(this).remove();
                            return false;
                        }
                    });
                }

                // 当前元素后面没有同辈元素，使当前元素的上一个元素处于活动状态
                if ($(this).parents('.menuTab').prev('.menuTab').size()) {
                    var activeId = $(this).parents('.menuTab').prev('.menuTab:last').data('id');
                    $(this).parents('.menuTab').prev('.menuTab:last').addClass('active');
                    $('.mainContent .RuoYi_iframe').each(function () {
                        if ($(this).data('id') == activeId) {
                            $(this).show().siblings('.RuoYi_iframe').hide();
                            return false;
                        }
                    });

                    //  移除当前选项卡
                    $(this).parents('.menuTab').remove();

                    // 移除tab对应的内容区
                    $('.mainContent .RuoYi_iframe').each(function () {
                        if ($(this).data('id') == closeTabId) {
                            $(this).remove();
                            return false;
                        }
                    });
                }
            }
            // 当前元素不处于活动状态
            else {
                //  移除当前选项卡
                $(this).parents('.menuTab').remove();

                // 移除相应tab对应的内容区
                $('.mainContent .RuoYi_iframe').each(function () {
                    if ($(this).data('id') == closeTabId) {
                        $(this).remove();
                        return false;
                    }
                });
                scrollToTab($('.menuTab.active'));
            }
            return false;
        }

        $('.menuTabs').on('click', '.menuTab i', closeTab);

        //关闭其他选项卡
        function closeOtherTabs() {
            $('.page-tabs-content').children("[data-id]").not(":first").not(".active").each(function () {
                $('.RuoYi_iframe[data-id="' + $(this).data('id') + '"]').remove();
                $(this).remove();
            });
            $('.page-tabs-content').css("margin-left", "0");
        }
        $('.tabCloseOther').on('click', closeOtherTabs);

        //滚动到已激活的选项卡
        function showActiveTab() {
            scrollToTab($('.menuTab.active'));
        }
        $('.tabShowActive').on('click', showActiveTab);

        // 点击选项卡菜单
        function activeTab() {
            if (!$(this).hasClass('active')) {
                var currentId = $(this).data('id');
                // 显示tab对应的内容区
                $('.mainContent .RuoYi_iframe').each(function () {
                    if ($(this).data('id') == currentId) {
                        $(this).show().siblings('.RuoYi_iframe').hide();
                        return false;
                    }
                });
                $(this).addClass('active').siblings('.menuTab').removeClass('active');
                scrollToTab(this);
            }
        }

        // 点击选项卡菜单
        $('.menuTabs').on('click', '.menuTab', activeTab);

        //刷新iframe
        function refreshTab() {
            var currentId = $('.page-tabs-content').find('.active').attr('data-id');
            var target = $('.RuoYi_iframe[data-id="' + currentId + '"]');
            var url = target.attr('src');
            target.attr('src', url).ready();
        }



        // 刷新按钮
        $('.tabReload').on('click', refreshTab);

        $('.menuTabs').on('dblclick', '.menuTab', refreshTab);

        // 左移按扭
        $('.tabLeft').on('click', scrollTabLeft);

        // 右移按扭
        $('.tabRight').on('click', scrollTabRight);

        // 关闭当前
        $('.tabCloseCurrent').on('click', function () {
            $('.page-tabs-content').find('.active i').trigger("click");
        });

        // 关闭全部
        $('.tabCloseAll').on('click', function () {
            $('.page-tabs-content').children("[data-id]").not(":first").each(function () {
                $('.RuoYi_iframe[data-id="' + $(this).data('id') + '"]').remove();
                $(this).remove();
            });
            $('.page-tabs-content').children("[data-id]:first").each(function () {
                $('.RuoYi_iframe[data-id="' + $(this).data('id') + '"]').show();
                $(this).addClass("active");
            });
            $('.page-tabs-content').css("margin-left", "0");
        });
    }

    return {
        init: _init
    }
});
